<template>
  <a-card :bordered="false">
    <a-table ref="table" :scroll="{ y: tableHeight }" :columns="columns" :rowKey="(row, index) => index"
      :dataSource="data" :loading="loading" :bordered="true" size="small" style="margin-top: -30px;">
      <span slot="UserAvatarURL" slot-scope="text, record">
        <a v-if="hasPerm('Base_User.Edit')">
          <a-popover>
            <!-- <img :src="text" @error="this.src = null" width="30px" height="30px" /> -->
            <a-avatar icon="user" :src="text" style="width: 40px;height: 40px;" />
            <template #content>
              <a-avatar icon="user" :src="text" :size="200" style="width: 200px;height: 200px;" />
            </template>
          </a-popover>
        </a>
      </span>
    </a-table>
  </a-card>
</template>

<script>
const columns = [
  { title: '头像', dataIndex: 'Icon', width: '4%', scopedSlots: { customRender: 'UserAvatarURL' } },
  { title: '姓名', dataIndex: 'UserName', width: '10%' },
  { title: '手机号码', dataIndex: 'Phone', width: '10%' },

]

export default {
  components: {
  },
  props: {
    pId: { require: true },
  },
  mounted() {
    this.$nextTick(() => {
      // 页面渲染完成后的回调
      this.tableHeight = this.getTableHeight(true) + 24
    })
    this.data = []
    console.log(this.pId)
    this.getDataList()

  },
  watch: {
    pId(n, o) {
      console.log(n, o)
      if (n) {
        this.getDataList();
      }

    }
  },
  data() {
    return {
      tableHeight: 500, // 表格高度
      data: [],
      pagination: {
        current: 1,
        pageSize: 8,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true
      },
      entity: {},
      loading: false,
      columns,
      queryParam: { Condition: 'Name' },
      visible: false,
      imgUrl: require('@/assets/logo.png')
    }
  },

  methods: {
    getDataList() {
      this.data = []
      this.$http
        .post(
          "/Base_ProjectWork/Base_ProjectPartake/GetProjectPartakeUserList?ProjectId=" + this.pId)
        .then((res) => {
          if (res.Success) {
            this.data = res.Data;

          }
        });
    },
  }
}
</script>
